<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
</head>

<body>
  <div class="layui-form" >
    <div class="layui-form-item" >
      <div class="layui-inline">
        <label class="layui-form-label">输入框:</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" name="input" placeholder="请输入" />
        </div>
      </div>
    </div>
    <div class="layui-form-item" >
      <div class="layui-inline ">
        <label class="layui-form-label">单选框:</label>
        <div class="layui-input-inline">
          <input type="radio" name="radio" value="0" title="否" checked="" lay-verify="required"  lay-verType="tips" />
          <input type="radio" name="radio" value="1" title="是" lay-verify="required"  lay-verType="tips"/>
        </div>
      </div>
    </div>
    <div class="layui-form-item" >
      <div class="layui-inline">
        <label class="layui-form-label">下拉框:</label>
        <div class="layui-input-inline">
          <select id = 'select' name="select" lay-search lay-verify="required" >
            <option value=''></option>
            <option value='0'>选择 -- 0</option>
            <option value='1'>选择 -- 1</option>
            <option value='2'>选择 -- 2</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item" >
      <div class="layui-inline">
        <label class="layui-form-label">多选框:</label>
        <div class="layui-input-inline">
          <input type="checkbox" name="checkbox" value="选项一" title="选项一" lay-verify="required" />
          <input type="checkbox" name="checkbox" value="选项二" title="选项二" lay-verify="required" />
          <input type="checkbox" name="checkbox" value="选项三" title="选项三" lay-verify="required" />
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注:</label>
      <div class="layui-input-inline">
        <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
      <div class="layui-inline">
        <button  class="layui-btn"  lay-submit lay-filter= "my-form" type="button" title="提交">提交</button>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../../layui/layui.js"></script>
  <script>
    var app;
    layui.extend({
      binder: "../../layui_exts/binder/binder",
    }).use(['form', 'binder','vform'], function () {
      layui.form.wakeUp();
      app = layui.form.render();
      layui.form.on('submit(my-form)', function(data){
        var field = data.field;
          console.log('layui.form表单值为:' + JSON.stringify(field));
          console.log('layui.vform表单值为:' + JSON.stringify(app.form));
      });
    });
  </script>
</body>

</html>